import './Scss/SupervisionFoundation.scss'
import { useState, useEffect, useRef } from 'react'
import { useSize } from 'ahooks'
import { Column } from '@ant-design/plots'

export const SupervisionFoundation001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data] = useState([])

    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                data: Data,
                autoFit: false,
                width,
                height: height,
                appendPadding: 16,
                maxColumnWidth: 14,
                xField: 'type',
                yField: 'value',
                color: '#FAD688',
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '次', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [Data, size])

    return (
        <div className="SupervisionFoundation001" ref={ChartsBox}>
            {Charts && <Column {...Charts} />}
        </div>
    )
}
